<template>
  <div class="home-container">
    <!-- 风格简述 -->
    <div class="top-box">
      <div class="title1">
        <p style="color: #555555; font-size: 32px; font-weight: 700">轻奢风</p>
      </div>
    </div>
    <div class="intro">
      <img src="../assets/imgs/轻奢风.jpg" alt="" />
      <div style="margin-left: 50px; width: 520px">
        <h2>轻奢风概述</h2>
        <p>
          轻奢风格是一种简约主义为基调，注重在细节处做出亮点的风格。轻奢风格装饰简洁，无论空间布局，还是饰品设计搭配，摒弃繁复的装饰以及花哨的图案，崇尚简洁的设计风格，简单极致就是一种奢华。轻奢风格强调功能实用性，实用性为目的，又强调舒适性高，体验高品质的现代生活，并营造出休闲、轻松的家居环境。
        </p>
      </div>
    </div>
    <!-- 风格展示 -->
    <div class="top-box">
      <div class="title2">
        <p style="color: #555555; font-size: 32px; font-weight: 700">
          轻奢设计
        </p>
      </div>
    </div>
    <div class="design">
      <div class="itmes" v-for="(i, index) in this.sylelist" :key="index" @click="goToDetail(i)">
        <img :src="'http://127.0.0.1:8000' + i.images[0].image" alt=""  />
      </div>
    </div>
    <el-empty
      v-if="this.Empty"
      description="暂时还没有宝贝哦"
      :image-size="300"
    ></el-empty>
    <div style="margin-bottom: 100px"></div>
  </div>
</template>

<script>
import { getstyles } from "@/api/router.js";
export default {
  data() {
    return {
      Empty: true,
      styleId: null,
      sylelist: [],
    };
  },
  created() {
    this.styleId = this.$route.query.style_id;
    this.getstyleList();
  },
  methods: {
    // 获取风格数据
    getstyleList() {
      getstyles(this.styleId).then((res) => {
        this.sylelist = res;
        if (this.sylelist.length !== 0) {
          this.Empty = false;
        }
      });
    },
    goToDetail(i) {
      this.$router.push({ path: "/productDetails", query: { id: i.id } });
      console.log(i.id);
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  width: 100%;
  // height:100%;
  .top-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title1 {
  margin-top: 5px;
  border-left: 5px solid #f59a23;
  padding-left: 15px;
}

.title2 {
  margin-top: 40px;
  border-left: 5px solid #f59a23;
  padding-left: 15px;
}

.intro {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap; /* 使内容在小屏幕上换行 */
  gap: 20px; /* 添加间距 */
}

.intro img {
  width: 100%;
  max-width: 520px; /* 确保图片不会超出最大宽度 */
  height: auto;
  border-radius: 5px; /* 添加圆角 */
}

.intro-text {
  max-width: 520px;
  margin-left: 20px;
}

.intro h2 {
  font-size: 26px;
  line-height: 75px;
  color: #555555;
}

.intro p {
  font-size: 20px;
  line-height: 35px;
  text-indent: 2em;
}

@media (max-width: 768px) {
  .intro {
    flex-direction: column; /* 在小屏幕上垂直布局 */
    align-items: center;
  }

  .intro-text {
    margin-left: 0;
    text-align: center;
  }

  .intro h2 {
    line-height: normal; /* 调整小屏幕上的行高 */
  }

  .intro p {
    text-indent: 0; /* 移除小屏幕上的首行缩进 */
  }
}
  .design {
    width: 70%;
    padding-top: 30px;
    padding-left: 15%;
    column-count: 4; /* 控制列数 */
    column-gap: 1rem; /* 控制列之间的间距 */
    img {
      width: 100%;
      margin-bottom: 10px;
      display: block;
    }
  }
  .design .itmes {
    transition: transform 0.3s ease-in-out;
  }

  .design .itmes:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.468)
  }
}
</style>
